<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Markdown Notebook</title>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<!-- vue.js -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/marked" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/moment"></script>

		<!-- 笔记本应用 -->
		<div id="notebook">
			<!-- 笔记记录面板 -->
			<aside class="side-bar">
				<!-- 工具栏 -->
				<div class="toolbar">
					<button type="button" :title="addButtonTitle" @click="addNote"><i class="icon material-icons">add</i> Add Note</button>
				</div>
				<!-- 笔记列表 -->
				<div class="notes">
					<div class="note" v-for="note in sortedNotes" :class="{selected: note === selectedNote}" @click="selectNote(note)"
					 :key="note.id">
						<i class="icon material-icons" v-if="note.favorite">star</i>
						{{note.title}}
					</div>
				</div>
			</aside>

			<template v-if="selectedNote">
				<!-- 主面板 -->
				<section class="main">
					<div class="toolbar">
						<!-- 新的工具栏添加在这里！ -->
						<input type="text" v-model="selectedNote.title" placeholder="Note title" />
						<button type="button" title="Favorite note" @click="favoriteNote"><i class="icon material-icons">{{selectedNote.favorite ? 'star' : 'star_border'}}</i></button>
						<button type="button" title="Remove note" @click="removeNote"><i class="icon material-icons">delete</i></button>
					</div>
					<textarea v-model="selectedNote.content"></textarea>
					<!-- 显示笔记相关信息 -->
					<div class="toolbar status-bar">
						<!-- 日期过滤器 -->
						<span class="date">
							<span class="label">Created</span>
							<span class="value">{{ selectedNote.created | date }}</span>
						</span>
						<!-- 行数 -->
						<span class="lines">
							<span class="label">Lines</span>
							<span class="value">{{ linesCount }}</span>
						</span>
						<!-- 单词数 -->
						<span class="words">
							<span class="label">Words</span>
							<span class="value">{{ wordsCount }}</span>
						</span>
						<!-- 字符数 -->
						<span class="characters">
							<span class="label">Characters</span>
							<span class="value">{{ charactersCount }}</span>
						</span>
					</div>
				</section>

				<!-- 预览面板 -->
				<aside class="preview" v-html="notePreview">

				</aside>
			</template>

		</div>
		<script src="./script.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
